import React, { useEffect, useState } from "react";
import { Cell, Image, List, Popup, Card, Typography } from 'react-vant';
import { Revoke, ServiceO, Gift, Add, ChatO, PhoneO, } from '@react-vant/icons';

// 订单详情页
const Popupitem = (props) => {
    const { datadishes, totalList, id, setVisible } = props

    return (
        <>
            {/* 感谢 */}
            <Card round>
                <Card.Header border style={{ fontSize: '14px', fontWeight: '100 ', }}>感谢您对趣学面馆的信任，欢迎再次光临</Card.Header>
                <Card.Body style={{ display: 'flex ', justifyContent: ' space-between', padding: '15px 35px' }}>
                    <div style={{ textAlign: 'center' }}>
                        <Gift fontSize={'20px'} />
                        <div style={{ fontSize: '12px' }}>打赏</div>
                    </div>
                    <div style={{ textAlign: 'center', color: 'rgb(225, 130, 60)' }}>
                        <Add fontSize={'20px'} />
                        <div style={{ fontSize: '12px' }}>再来一单</div>
                    </div>
                    <div style={{ textAlign: 'center', color: 'rgb(225, 130, 60)' }}>
                        <ChatO fontSize={'20px'} />
                        <div style={{ fontSize: '12px' }}>联系商家</div>
                    </div>
                    <div style={{ textAlign: 'center' }}>
                        <PhoneO fontSize={'20px'} />
                        <div style={{ fontSize: '12px', }}>致电骑手</div>
                    </div>
                </Card.Body>

            </Card>
            {/* 趣学面馆 */}
            <Card round style={{ margin: '15px 0' }}>  <Card.Header border style={{ fontSize: '16px', fontWeight: '100 ', }}>趣学面馆</Card.Header>
                <Card.Body  style={{ display: 'flex ', justifyContent: ' space-between', padding: '15px 15px' }}>
                    {
                        <div className="orderGoods" style={{ paddingRight: ' 10px'}}>
                            {console.log('dishes', datadishes)}

                            {datadishes.map((item) => {
                                return (
                                    <div key={item.dishes_id}>{
                                        <div >
                                            <Image width={60} height={60} src={item.dishes_img} style={{ marginRight: '20px', marginLeft: '10px' }} radius={'10px'} />
                                            <h4 style={{ paddingLeft: '10px', width: '80px' }}> <Typography.Text ellipsis={{ rows: 2 }}>{item.dishes_name}</Typography.Text>
                                            </h4>
                                        </div>
                                    }
                                    </div>)

                            })}
                            {
                                <div style={{ position: 'absolute', right: '20px', fontSize: '15px', paddingTop: '15px' }}>
                                    <h4>￥:{totalList[id].count_price}</h4>
                                    <h5>共{datadishes.length}件</h5>
                                </div>
                            }
                        </div>


                    }
                </Card.Body>

            </Card>
            {/* 订单信息 */}
            <Card round style={{ marginBottom: '10px' }}>
                <Card.Header border style={{ fontSize: '14px', fontWeight: '100 ', }}>订单信息</Card.Header>
                <Card.Body
                // style={{ display: 'flex ', justifyContent: ' space-between', padding: '15px 35px' }}
                >
                    {/* {console.log('totalList[id]', totalList[id].Oid)} */}
                    <div style={{ display: 'flex ', justifyContent: ' space-between', }}>
                        <div>订单号码</div>
                        <div style={{ fontSize: '12px' }}>{totalList[id].order_num
                        }</div>
                    </div>
                    <div style={{ display: 'flex ', justifyContent: ' space-between', margin: '10px 0' }}>
                        <div>下单时间</div>
                        <div style={{ fontSize: '12px' }}>{totalList[id].complete_time.split('T')[0] 
                        }</div>
                    </div>
                    <div style={{ display: 'flex ', justifyContent: ' space-between', }}>
                        <div>支付方式</div>
                        <div style={{ fontSize: '12px' }}>在线支付</div>
                    </div>
                    <div style={{ display: 'flex ', justifyContent: ' space-between', margin: '15px 0' }}>
                        <div>餐具数量</div>
                        <div style={{ fontSize: '12px' }}>商家按餐量提供</div>
                    </div>


                </Card.Body>

            </Card>

        </>
    )
}
export default Popupitem
